// 名品机械
<template>
  <div class="FamousMechanics">
    <nav-login></nav-login>
    <home-seach></home-seach>
    <goods-nav :navindex="navindex"></goods-nav>
    <div class="w1200">
      <div class="title">
        <router-link to="/" tag="span" style="cursor: pointer;">首页</router-link> 
        >
        <span>快速下单</span>
      </div>
      <div class="Reminder">
        <i>温馨提示:</i>
        <ul>
          <li>① 直接填写订货编码（N位字符如：xxxxxx）即可快速查找所需商品，批量加入购物车。</li>
          <li>② 所填数量需大于等于商品的最小起订量，低于起订量时，将按商品起订量加入购物车。</li>
          <li>③ 无法加入购物车的原因可能是列表存在已下架或价格异常商品，请删除后操作。</li>
        </ul>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="light"
       
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column prop="product_code" label="订货编码" width="160">
          <template slot-scope="scope">
            <el-input v-model="scope.row.product_code" size="mini"></el-input>
          </template>
        </el-table-column>

        <el-table-column prop="OrderQuantity" label="操作" width="80">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click.enter="ConfirmSearch(scope.row.product_code, scope.$index)"
              type="warning"
            >搜索</el-button>
          </template>
        </el-table-column>

        <el-table-column prop="num" label="订货数量" width="80">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.num"
              size="mini"
              :max="scope.row.goods_stock"
              onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
              onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'0')}else{this.value=this.value.replace(/\D/g,'')}"
            ></el-input>
          </template>
        </el-table-column>

        <el-table-column prop="goods_title" label="产品名称" width="240"></el-table-column>

        <el-table-column prop="brand_title" label="品牌" width="100"></el-table-column>

        <el-table-column prop="style_title" label="型号"></el-table-column>

        <el-table-column prop="cate_title" label="类别" width="120"></el-table-column>

        <el-table-column prop="selling_price" label="单价(￥)" width="120"></el-table-column>

        <el-table-column label="操作" width="50">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >移除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="margin-top: 20px">
        <el-button @click="AddTable" size="mini">+继续添加商品</el-button>
        <!-- <el-button @click="ConfirmSearch" size="mini" type="warning">确认搜索</el-button> -->
        <el-button @click="AddCart" size="mini" type="primary" icon="el-icon-sold-out">添加到购物车</el-button>
      </div>
    </div>
    <!-- 添加到购物车后的提示 -->
    <el-dialog title="商品已经成功添加到购物车...." :visible.sync="centerDialogVisible" width="30%" center>
      <span>请选择是否移步购物车进行结算</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">继续逛逛</el-button>
        <el-button type="primary" @click="jumpShoppingCart">移步到购物车</el-button>
      </span>
    </el-dialog>
    <bottom-nav></bottom-nav>
    <home-footer></home-footer>
  </div>
</template>

<script>
export default {
  name: "QuickOrder",

  data() {
    return {
      mySwitch: false, // 添加购物车之前的验证
      centerDialogVisible: false,
      navindex: -1,
      tableData: [
        {
          product_code: "", // 编码
          num: 1, // 数量
          goods_stock: "", // 库存
          goods_title: "", // 产品名称
          brand_title: "", // 品牌
          style_title: "", //型号
          cate_title: "", // 含税单价
          selling_price: "" // 单价
        }
      ],
      multipleSelection: []
    };
  },

  methods: {
    // 移步到购物车
    jumpShoppingCart() {
      this.centerDialogVisible = false;
      this.$router.push("ShoppingCart");
    },
    // 添加至购物车
    AddCart() {
      if (this.mySwitch) {
        let myForm = [];
        let user_id = this.$store.state.UserInfor.user_id;
        // 信息更新
        this.tableData.forEach(element => {
          if (element.num !== 0 && element.id) {
            let _myForm = {
              product_id: "",
              num: "",
              goods_spec: ""
            };
            _myForm.product_id = element.id;
            _myForm.num = element.num;
            _myForm.goods_spec = element.goods_spec;   // 购物车增加的goods_spec 用来匹配数据
            myForm.push(_myForm);
          }
        });
        console.log(user_id, myForm);
        let myNumSwich = 0;
        myForm.forEach(element => {
          myNumSwich += element.num;
        });
        try {
          let ShoppingCartData = this.$http({
            method: "post",
            url: "/api/index/web/batchAddToCart",
            data: {
              user_id,
              myForm
            }
          });
          ShoppingCartData.then(res => {
            if (res.data.State.Code == 200) {
              // this.centerDialogVisible = true;
              console.log(res);
              this.$notify({
                title: '成功添加到购物车...',
                type: 'success'
              })
            }
          }).catch(err => {
            console.log(err);
          });
        } catch (error) {
          console.log("快速下单接口出现了问题...");
        }
      } else {
        this.$notify.error({
          title: "错误",
          message: "请确定您已勾选要添加购物车的产品..."
        });
      }
    },

    AddTable() {
      this.tableData.push({
        product_code: "", // 编码
        num: 1, // 数量
        goods_stock: "", // 库存
        goods_title: "", // 产品名称
        brand_title: "", // 品牌
        style_title: "", //型号
        cate_title: "", // 含税单价
        selling_price: "" // 单价
      });
    },

    // 确认搜索
    async ConfirmSearch(code, index) {
      let product_code = code;
      console.log(index);
      let tableData = this.$http({
        method: "post",
        url: "/api/index/web/quickQuote",
        data: {
          product_code
        }
      });
      tableData
        .then(res => {
          if (res.data.State.Code == 200) {
            // 参数说明：index： 从哪里开始  1：截取几位  res.data.data：新填充的值
            this.tableData.splice(index, 1, res.data.data);
            this.tableData[index].product_code = product_code;
            this.tableData[index].num = 1;
            // this.tableData[index] = res.data.data
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // checked 按钮选择事件
    handleSelectionChange(selection) {
      selection.forEach(element => {
        if (element.id) {
          this.mySwitch = true;
        }
      });
    },

    deleteRow(index, rows) {
      rows.splice(index, 1);
    }
  }
};
</script>
<style lang="scss" scoped>
.FamousMechanics {
  .w1200 {
    width: 1200px;
    margin: auto;
    .title {
      margin: 34px 10px 0px 10px;
      padding-left: 10px;
      border-left: 3px solid #a2a2a2;
      font-size: 14px;
      line-height: 14px;
      color: #3a3a3a;
    }
    .Reminder {
      border-top: 1px solid #eaeaea;
      padding-top: 15px;
      margin-top: 15px;
      line-height: 22px;
      font-size: 12px;
      color: #6e6e6e;
    }
  }
}
</style>


